import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Col, TreeSelect, Select } from 'antd';
import { FormItemLayout } from '../../../../../comps';
import { connect } from 'dva';
import 'moment/locale/zh-cn';
const FormItem = Form.Item;

class userPoolC extends PureComponent {
  state = {};

  componentDidMount() {
    this.props.onRef(this);
  }

  // 数组去重
  unique = (arr) => {
    return [...new Set(arr)];
  };

  // 入用户池model框标签点击子节点获取父节点
  showwwww = (value, node, extra) => {
    const tagArr = _.cloneDeep(extra.selectedNodes);
    const newArr = [];
    if (tagArr && tagArr.length) {
      tagArr.map((item) => {
        newArr.push(item.props);
      });
    }
    const newArr2 = _.cloneDeep(newArr);
    const newTag = [];
    if (newArr2.length) {
      newArr2.map((item) => {
        newTag.push(item.value);
        if (item.pid !== null) {
          newTag.push(item.pid);
        }
      });
    }
    const newTag2 = this.unique(newTag);
    this.props.changTage(newTag2);
  };

  render() {
    const {
      form: { getFieldDecorator },
      selectPoolName,
      selectPoolTag,
    } = this.props;
    return (
      <Form>
        <Col span={24}>
          <FormItem label={'券池名称'} {...FormItemLayout}>
            {getFieldDecorator('name1a', {
              rules: [{ required: true, message: `请输入` }],
            })(
              <Select style={{ width: '100%' }} placeholder='请选择'>
                {selectPoolName
                  ? selectPoolName.map((item) => {
                      return (
                        <Select.Option key={item.id} value={item.id}>
                          {item.name}
                        </Select.Option>
                      );
                    })
                  : null}
              </Select>,
            )}
          </FormItem>
        </Col>
        <Col span={24}>
          <FormItem label={'标签'} {...FormItemLayout}>
            {getFieldDecorator(
              'tags',
              {},
            )(
              <TreeSelect
                style={{ width: '100%' }}
                allowClear
                multiple
                onSelect={(value, node, extra) => this.showwwww(value, node, extra)}
                onDeselect={(value, node, extra) => this.showwwww(value, node, extra)}
                treeData={selectPoolTag}
                treeDefaultExpandAll
                placeholder='请选择'
              />,
            )}
          </FormItem>
        </Col>
      </Form>
    );
  }
}
export default connect(({}) => ({}))(Form.create()(userPoolC));
